import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import { constRoutes } from './router'
import store from './store'

import 'normalize.css/normalize.css'

Vue.config.productionTip = false

// 引入element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI, { size: 'small', zIndex: 1000 })

// 引入style文件
import './styles/index.scss'

import '@/icons' // icon

// 引入应用间通信模块
import actions from '@/shared/index.js'

// 引入路由卫士
import { guardHandler } from '@/router/guard.js'

import '@/directive/index.js'

// qiankun微前端改造
let router = null
let instance = null

function render() {
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/sub/1' : '/',
    mode: 'history',
    scrollBehavior: () => ({ y: 0 }),
    routes: constRoutes,
  })

  // 路由卫士
  guardHandler(router)

  instance = new Vue({
    router,
    store,
    render: h => h(App),
  }).$mount('#app')
}

export { router }

if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

export async function bootstrap() {
  console.log('[vue] vue app bootstraped')
}

export async function mount(props) {
  console.log('[vue] props from main framework', props)
  actions.setActions(props)
  render(props)
}

export async function unmount() {
  instance.$destroy()
  instance = null
  router = null
}
